<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div1 {
            width: 240px;
            height: 240px;
            /* background-color: orangered; */
        }
    </style>
</head>

<body>
    <!-- <div id="app">
        <div v-bind:style="[{width:'240px',height: '240px'},color()]"></div>
        <input type="range" name="" id="" max="255" v-model="R">红色{{R}}<br>
        <input type="range" name="" id="" max="255" v-model="G">绿色{{G}}<br>
        <input type="range" name="" id="" max="255" v-model="B">蓝色{{B}}<br>
        <input type="range" name="" id="" max="100" v-model="A">不透明度{{A/100}}
        
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                R:50,
                G:50,
                B:50,
                A:50, 
            },
            methods:{
                color(){
                    return {backgroundColor:`rgba(${this.R},${this.G},${this.B},${this.A/100})`}
                }
            }
        })
        
    </script> -->

    <div id="app">
        <!-- <div class="div1" v-bind:style="{backgroundColor: `rgba(${R},${G},${B},${A})`}"></div> -->
        <div class="div1" v-bind:style="{backgroundColor: setColor()}"></div>
        <input type="range" name="" id="" min="0" max="255" v-model="R">红色{{R}}<br>
        <input type="range" name="" id="" min="0" max="255" v-model="G">蓝色{{G}}<br>
        <input type="range" name="" id="" min="0" max="255" v-model="B">绿色{{B}}<br>
        <!-- 通过 step设置 范围从min到max之间变化的最小单位 默认值是1 -->
        <input type="range" name="" id="" min="0" max="1" step="0.01" v-model="A">透明度{{A}}
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>

    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                R: 50,
                G: 50,
                B: 50,
                A: 0.5
            },
            methods: {
                setColor(){
                    return `rgba(${this.R},${this.G},${this.B},${this.A})`;

                }
            }


        })
    </script>
</body>

</html>